<template>
	<view>

		<view style="width: 90%; margin: 200rpx auto;">
			<!-- 200rpx  == 100px -->
			<view style=" margin-bottom: 70rpx; font-size: 60rpx; color: royalblue; text-align: center;">重置密码</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item name="userPhone">
					<uni-easyinput v-model="form.userPhone" @blur="getPhone" prefixIcon="phone" placeholder="请输入用户手机号">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="code">
					<uni-easyinput v-model="code" prefixIcon="chat" maxlength="6" placeholder="请输入验证码">
					</uni-easyinput>
					<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}"
						@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
				</uni-forms-item>

				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入密码">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="confirm">
					<uni-easyinput type="password" v-model="form.confirm" prefixIcon="locked" placeholder="请确认密码">
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>

			<view>
				<button type="default" @click="reset">确认重置</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:9000/', //主域名
				form: {
					userPhone: '',
					password: ''
				},
				code: '',
				rules: {
					userPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}],
						validateTrigger: 'submit'
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}],
						validateTrigger: 'submit'
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}],
						validateTrigger: 'submit'
					},
					confirm: {
						rules: [{
							required: true,
							errorMessage: '请确认密码'
						}],
						validateTrigger: 'submit'
					},
				},
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码'
			}
		},
		methods: {

			//重置密码
			reset() {
				if (this.form.password !== this.form.confirm) {
					uni.showToast({
						icon: "none",
						title: '两次密码输入不一致'
					})
					return
				}
				uni.request({
					url: this.URL + 'user/user/user/getCode/' + this.form.userPhone,
					method: 'GET',
					success: (res) => {
						if (res.data.data.code !== this.code) {
							uni.showToast({
								icon: "none",
								title: '验证码错误'
							})
							return
						} else {
							uni.request({
								url: this.URL + 'user/user/user/resetPwd/',
								method: "POST",
								data: this.form,
								success: (res) => {
									console.log(res)
									if (res.data.code == 20000) {
										//重置成功提示信息
										uni.showToast({
											icon: "none",
											title: '重置成功',
										})
										//跳转页面
										uni.navigateTo({
											url: "login"
										})
									}
								}
							})
						}

					}
				})

			},

			//校验手机号
			getPhone() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!reg.test(this.form.userPhone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
				}
			},

			//发送验证码判断有没有手机号
			Qzyzm() {
				if (this.form.userPhone == '') {
					uni.showToast({
						"title": "请输入手机号",
						"icon": 'none'
					})
				} else {
					uni.request({
						url: this.URL + 'user/user/user/send/' + this.form.userPhone,
						method: "GET",
						success: (res) => {
							console.log(res.data.data.code)

							var num = 60;
							if (this.QzyzmStare == false) {
								this.Qztime = '60';
								this.Qztext = 's后获取';
								this.QzyzmStare = true;
								var interval = setInterval(() => {
									--this.Qztime
								}, 1000)
								setTimeout(() => {
									clearInterval(interval)
									this.Qztext = '获取验证码'
									this.Qztime = ''
									this.QzyzmStare = false
								}, 60000)
							}
						}
					})

				}

			},

		}
	}
</script>

<style>

</style>
